import { FC, Fragment, useEffect } from 'react';
import nprogress from 'nprogress';
import 'nprogress/nprogress.css';
import './index.less';

nprogress.configure({
  easing: 'ease', // CSS3缓冲动画字符串, 例如: ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier
  speed: 500, // 递进进度条速度
  showSpinner: false, // 是否显示加载icon, 默认true
  trickleSpeed: 200, // 自动递增间隔(ms)
  minimum: 0.3 // 初始化时最小百分比, 默认是0.08
});

interface LoadingProps {
  parent?: string;
}

const Loading: FC<LoadingProps> = ({ parent }) => {
  if (parent) {
    nprogress.configure({
      parent // 指定改变的父容器，默认body。
    });
  }

  useEffect(() => {
    nprogress.start();
    return () => {
      nprogress.done();
    };
  }, []);

  return <Fragment />;
};

export default Loading;
